<template>
  <el-table 
  :data="tableData.filter(data => !search
  || data.id.toString().includes(search.toString()) 
  || data.date.toString().includes(search.toString()) 
  || data.title.toString().includes(search.toString()) 
  || data.name.toString().includes(search.toString()))">
    <el-table-column label="代号" prop="id" />  
    <el-table-column label="专业名称" prop="name" />
    <el-table-column label="地区" prop="title" />
    <el-table-column label="人数" prop="date" />
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="mini" placeholder="输入关键词搜索" />
      </template>
     <template #default="scope">
        <el-button  @click="handleEdit(scope.$index, scope.row)">查看</el-button >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: 'XXX（物理) XXX（历史）',
          title:'辽宁',
          name: '软件技术',
        },
        {
          id: 2,
          date: 'XXX（物理) XXX（历史）',
          title:'辽宁',
          name: '计应',
        },
        {
          id: 3,
          date: 'XXX（物理) XXX（历史）',
          title:'辽宁',
          name: '大数据',
        },
         {
          id: 4,
          date: 'XXX（物理) XXX（历史）',
          title:'辽宁',
          name: '移动应用开发',
        },
        {
          id: 5,
          date: 'XXX（物理) XXX（历史）',
          title:'辽宁',
          name: '云计算机',
        },
      ],
      search: '',
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      console.log(index, row)
    },
  },
}
</script>
